<template>
	<div class="cart-bottom-bar">
		<div class="select">
			<label for="">
				<input type="checkbox" :checked="isChecked" @click="changeAll"
				>
				全选
			</label>
		</div>
		<div class="text">
			<span>合计:</span>
			<span class="total-price">￥{{allPrice}}</span>
		</div>
		<div class="goods-num">
			<span>当前共选中</span>
			<span class="nums">{{activeLength}}</span>
			<span>件商品</span>
		</div>
	</div>
</template>

<script>
	export default {
		name:'CartBottomBar',
		props:{
			selected:Number,
		},
		data(){
			return {
				isChecked:'checked',
				activeLength:0
			}
		},
		watch:{
			selected(){
				if( this.selected == this.$store.state.cartList.length ){
					this.isChecked = 'checked'
				}else {
					this.isChecked = false;
				}
			}
		},
		methods:{
			changeAll(){

			}
		},
		computed:{
			allPrice(){
				let total = 0;
				this.activeLength = 0;
				let activeCart = this.$store.state.cartList.filter(item=>item.isShow == true)
				activeCart.forEach(item=>{
					total += item.nowPrice*item.counter; 
					this.activeLength += item.counter;
				})
				return total;
			}
		}
	}
</script>

<style scoped>
	.cart-bottom-bar{
		display: flex;
		justify-content: left;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 49px;
		width: 100vw;
		height: 40px;
		background: #cccccc90;
		z-index: 9;
		font-size: 18px;
		padding: 10px;
	}
	.select {
		font-size: 16px;
	}
	.text {
		padding-left: 12px;
	}
	.text .total-price{
		color: darkred;
	}
	.goods-num{
		font-size: 14px;
		padding-left: 30px;
	}
	.nums {
		color: darkred;
		font-size: 18px;
		padding: 6px;
	}
</style>
